require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/layers/WebTileLayer",
    "esri/Basemap",
    "esri/widgets/TimeSlider",
    "esri/layers/GeoJSONLayer",
    "esri/layers/BaseDynamicLayer",
    "esri/geometry/Extent",
    "esri/layers/MapImageLayer",
    "esri/Graphic",
    "esri/layers/GraphicsLayer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/TextSymbol",
    "esri/layers/GroupLayer",
    "esri/core/reactiveUtils"
], function (Map, MapView, FeatureLayer, WebTileLayer, Basemap, TimeSlider, GeoJSONLayer, BaseDynamicLayer, Extent, MapImageLayer,
             Graphic, GraphicsLayer, SimpleMarkerSymbol, TextSymbol, GroupLayer, reactiveUtils) {
    //矢量底图
    var tdtMap = new WebTileLayer({//天地图
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=6b4673576b6f0421fec4fd67a7b47ce4",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
    })
    tdtMap.visible = true;
    tdtMap.title = "矢量底图"
//矢量标注
    var tdtAnnoMap = new WebTileLayer({//天地图注记
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=6b4673576b6f0421fec4fd67a7b47ce4",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    })
    tdtAnnoMap.visible = true;
    tdtAnnoMap.title = "矢量标注"
    const demographicGroupLayer = new GroupLayer({
        title: "底图和标注",
        visible: true,
        visibilityMode: "independent",//independent:每个子层独立于其他层管理其可见性。 inherited:每个子层的可见性与GroupLayer的可见性匹配。  exclusive:一次只能看到一个子层。
        layers: [tdtMap, tdtAnnoMap],
        opacity: 1
    });
    //影像底图标注
    var tdtyxMap = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=img_w&x={col}&y={row}&l={level}&tk=6b4673576b6f0421fec4fd67a7b47ce4",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    });
    tdtyxMap.visible = false;
    tdtyxMap.title = "影像底图"
    var tdtyxbzMap = new WebTileLayer({urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=6b4673576b6f0421fec4fd67a7b47ce4", subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],});
    tdtyxbzMap.title = "影像标注";
    tdtyxbzMap.visible = false;  //默认隐藏

// 使用TileLayer和FeatureLayer创建新地图
    map = new Map({
        basemap: "streets",

        // und: "world-elevation", //加载地形
        layers: [tdtMap, tdtAnnoMap, tdtyxMap, tdtyxbzMap]//featureLayer
    });
    //自定义离线地图

    var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 12,
        // minZoom: 4, //最大空间等级
        // maxZoom : 2, //最小空间等级
        center: [119.309799,26.37126],
    });

    //去除放大缩小
    view.ui.empty("top-left");


    //自定义叠加图片图层
    var CustomImageOverlayLayer = BaseDynamicLayer.createSubclass({
        properties: {
            picUrl: null,
            extent: null,
            image: null,
            canvas: null,
        },
        // Override the getImageUrl() method to generate URL
        // to an image for a given extent, width, and height.
        getImageUrl: function (extent, width, height) {
            //新Image对象，可以理解为DOM
            // if (!this.image) {
            //     this.image = new Image();
            // }
            // // this.image.src = this.picUrl;
            // this.image =;
            // console.log(this.image)
            // 创建canvas DOM元素，并设置其宽高和图片一样
            if (!this.canvas) {
                this.canvas = canvas = document.createElement("canvas");
            }
            this.canvas.width = 2000;
            this.canvas.height = 2000;

            //左上角地理坐标转换屏幕坐标,为了获取canvas绘制图片的起点
            var mapPoint = {
                x: this.extent.xmin,
                y: this.extent.ymax,
                spatialReference: {
                    wkid: 4326
                }
            };
            var screenPoint = view.toScreen(mapPoint);
            //根据extent范围计算canvas绘制图片的宽度以及高度
            //左下角
            var leftbottom = {
                x: this.extent.xmin,
                y: this.extent.ymin,
                spatialReference: {
                    wkid: 4326
                }
            };
            var screen_leftbottom = view.toScreen(leftbottom);
            //右上角
            var righttop = {
                x: this.extent.xmax,
                y: this.extent.ymax,
                spatialReference: {
                    wkid: 4326
                }
            };
            var screen_righttop = view.toScreen(righttop);

            this.canvas.getContext("2d").drawImage(document.getElementById("imageMapNeed"), screenPoint.x, screenPoint.y, Math.abs(screen_righttop.x -
                screen_leftbottom.x), Math.abs(screen_righttop.y - screen_leftbottom.y));
            return this.canvas.toDataURL("image/png");

        }
    });

    reactiveUtils.on(
        () => view.popup,
        "trigger-action",
        (event) => {
            // Execute the measureThis() function if the measure-this action is clicked
            if (event.action.id === "popupicon") {
                var sitename = event.action.sitename;
                em.clickpopup(sitename);
            }
        }
    );
    function clickpopup(sitename){
        this.popuptab = true;
    }


    var rcxc,lsdw;
    var em = new Vue({
        el: main,
        data: {
            popuptab: false,
            title: "Temp",
            //0  实测  1  模拟
            dataType: 1,
            //属性列表
            proData: null,
            //硬件属性劣币
            harWorddData: null,
            //总数据
            proDataNow: "",
            //文件下拉框
            fileSelectOption: null,
            //文件下拉框的值
            fileSelectValue: "",
            //时间轴
            timeSliderBeginTime: null,
            timeSilderEndTime: null,
            timeSilderValue: null,
            timeSelectDLayerShow: false,
            selectTimeRange: null,
            //属性列表切换
            proShow: true,
            // 图例
            tulieData: null,
            //图例是否显示
            tulisShow: false,
            tucengData: null,
            layerShow: true,
            //第几层
            layerNumber: "第一层",
            imageMapNeed: "",
            timeSilderValueTitle: "2020-09-03 12:00:00",
            locals18n: "",
            rcxcmodel:true,
            lsdwmodel:true,
            language: {
                MeasuredData: "实测数据", //实测数据
                Simulation: "模拟数据",   //模拟数据
                Observation_point: "观测点",  //观测点
                First_floor: "第一层",//第一层
                Second_floor: "第二层", //第二层
                Third_layer: "第三层",   //第三层
                Fourth_floor: "第四层",//第四层
                Fifth_floor: "第五层", //第五层
                Rendered_image: "渲染图",//渲染图
                Select_date: "选择日期",//选择日期
                Please_select_data_type: "请选择数据类型",//请选择数据类型
                sure: "确认",
                cancel: "取消",
                start_time: "开始时间",// 开始时间
                end_time: "结束时间", // 结束时间
                Attribute_name: "属性名",//属性名
                Number_layers: "层数",//层数
                value: "值", //值
                colour: "颜色", //颜色
                Corrected_value: "改正值",//改正值
            },
            //最大值最小值
            maxShow: false,
            min: "",
            max: "",
            urlHrefType: "",//判断是 拟合还是同化
        }, created: function () {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            //初始化属性
            this.getProType();
            //初始化Map
            this.getMapList();
            //初始化时间轴时间
            // this.initializeTimeSliderTime();
            //添加时间轴
            // this.initializeTimeSlider();
            //获取语言类型
            this.locals18n = this.common.Initial();
            var mapLanguage = this.language;
            if (this.locals18n == "en") {
                for (var key in mapLanguage) {
                    // console.log(messages.en.dm3Jsp[key]);
                    this.language[key] = messages.en.dm3Jsp[key];
                }
                this.layerNumber = messages.en.dm3Jsp.First_floor;
            }
            this.urlHrefType = window.location.href.split("type=")[1];
            loading.close(); //关闭loading
        }, watch: {
            'timeSilderValue': {
                handler(newValue, oldValue) {
                    this.timeSilderValueTitle = this.common.timestampToTime(newValue)
                    this.httpLoadShp();
                }
            }, 'proDataNow': {
                handler(newValue, oldValue) {
                    this.httpLoadShp();
                    // console.log(newValue);
                }
            }, 'fileSelectValue': {
                handler(newValue, oldValue) {

                    //获取Map列表
                    this.leftSwitch(this.proData[0].proNameen);
                    this.$http.get('/dm3/getMapTime.do?mapName=' + newValue, {emulateJSON: true}).then(function (res) {
                        // start: new Date(this.timeSliderBeginTime),
                        //     end: new Date(this.timeSilderEndTime)
                        // console.log(res);
                        this.timeSliderBeginTime = res.data.strDate;
                        this.timeSilderEndTime = res.data.endDate;
                        // this.initializeTimeSlider();
                    });
                    // 选择文件 之后还得重新设置下面的时间轴
                    // console.log(this.fileSelectOption);
                    this.httpLoadShp();
                }
            },
        }, methods: {
            changeTime() {
                //切换日期确认事件
                var timeRange = this.selectTimeRange;
                this.timeSliderBeginTime = new Date(this.selectTimeRange[0]).getTime();
                this.timeSilderEndTime = new Date(this.selectTimeRange[1]).getTime();
                this.initializeTimeSlider();
                this.timeSelectDLayerShow = false;
            },
            changeLayer(value, Title) {
                // console.log(value, Title);
                if (this.dataType == 0) {
                    //实测
                    if (value) {
                        //勾选了
                        // this.loadShp()
                        //项目改开始
                        this.loadsite()
                        //项目改结束
                    } else {
                        //移除
                        map.removeAll();
                    }
                } else {

                    //模拟数据
                    if (value) {
                        //如果勾选了，需要吧其他的勾选取消，然后得吧这个数据变回来
                        this.layerNumber = Title;
                        for (let i = 0; i < this.tucengData.length; i++) {
                            if (this.tucengData[i].title != Title) {
                                this.tucengData[i].value = false;
                            }
                        }
                        this.loadShp()
                    } else {
                        //移除
                        map.removeAll();
                    }
                }
            },
            changeditu(){
                if (tdtMap.visible){
                    tdtMap.visible = tdtAnnoMap.visible = false;
                    tdtyxbzMap.visible = tdtyxMap.visible = true;
                }else {
                    tdtMap.visible = tdtAnnoMap.visible = true;
                    tdtyxbzMap.visible = tdtyxMap.visible = false;
                }
            },
            loadsite(){
                //日常巡查
                rcxc = new GraphicsLayer();
                map.add(rcxc);
                var points = [
                    {x:119.309799,y:26.37126,'title':'库心'},
                    {x:119.280323,y:26.355167,'title':'日溪入库'},
                    {x:119.330529,y:26.347493,'title':'坝前'},
                    {x:119.282939,y:26.403927,'title':'皇帝洞'},
                    {x:119.366765,y:26.292007,'title':'㙴坂'},
                    {x:119.289579,y:26.360314,'title':'日溪'},
                ]
                for (let i = 0; i < points.length; i++) {
                    var point = points[i];
                    var textSymbol = new TextSymbol({
                        text:point.title,
                        color:'black',
                        offsetY:15,
                        font: {size:12}
                    });
                    var popupicon = {
                        type: "button",
                        title: '数据折线图',
                        id: 'popupicon',
                        icon: 'activity-monitor',
                        className: 'el-button',
                        // image: "http://localhost:8088/pic/IconSimulate.png",
                        sitename: point.title
                    }
                    var popup = {
                        title: '<div style="display: flex;align-items: center;justify-content: center;">'+point.title+'</div>',
                        content: '<img style="height: 150px;width: 300px;" src="http://localhost:8088/pic/userName.png"><div>站点简介</div>' +
                            // '<el-button click="clickpopup()">数据折线图</el-button>' +
                            '<div><input type="button" value="数据折线图" ></input></div>',
                        actionsEnabled: false,
                        actions: [popupicon],
                        overwriteActions: true
                    }
                    var pointGraphic = new Graphic({
                        geometry: {
                            type: 'point',
                            longitude:point.x,
                            latitude:point.y
                        },
                        symbol:{
                            type: 'simple-marker',
                            size: 10.25,
                            width: 2.6875,
                            // path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z",
                            color: 'blue',
                        },
                        attributes:{
                            title:point.title
                        },
                        popupTemplate: popup
                    });

                    // pointGraphic.set('title',textSymbol);
                    rcxc.add(pointGraphic);
                }
/*
                view.popup.on("trigger-action",async function (event) {
                    if (event.action.id === "illigalMessage") {
                        // 业务代码
                    }
                })
*/
                lsdw = new GraphicsLayer();
                map.add(lsdw)
                //历史点位
                var points1 = [
                    {x:119.314538,y:26.376258,'title':'码头'},
                    {x:119.297409,y:26.389816,'title':'七里'},
                    {x:119.296011,y:26.436402,'title':'霍口入库'},
                ]
                for (let i = 0; i < points1.length; i++) {
                    var point = points1[i];
                    var textSymbol = new TextSymbol({
                        text:point.title,
                        color:'black',
                        offsetY:15,
                        font: {size:12}
                    });
                    var popupicon = {
                        title: '数据折线图',
                        id: 'popupicon',
                        image: "http://localhost:8088/pic/IconSimulate.png",
                        sitename: point.title
                    }
                    var popup = {
                        title: '<div style="display: flex;align-items: center;justify-content: center;">'+point.title+'</div>',
                        content: '<img style="height: 150px;width: 300px;" src="http://localhost:8088/pic/userName.png"><div>站点简介</div>' +
                            '<div><input type="button" value="数据折线图" ></input></div>',
                        actionsEnabled: false,
                        actions: [popupicon],
                        overwriteActions: true
                    }
                    var pointGraphic = new Graphic({
                        geometry: {
                            type: 'point',
                            longitude:point.x,
                            latitude:point.y
                        },
                        symbol:{
                            type: 'simple-marker',
                            size: 10.25,
                            width: 2.6875,
                            // path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z",
                            color: 'blue',
                        },
                        attributes:{
                            title:point.title
                        },
                        popupTemplate: popup
                    });

                    // pointGraphic.set('title',textSymbol);
                    lsdw.add(pointGraphic);
                }
                /*var graphicsLayer = new GraphicsLayer();
                var points = [
                        {x:119.309799,y:26.37126,'title':'库心'},
                    {x:119.280323,y:26.355167,'title':'日溪入库'},
                {x:119.330529,y:26.347493,'title':'坝前'},
                    {x:119.282939,y:26.403927,'title':'皇帝洞'},
                        {x:119.366765,y:26.292007,'title':'㙴坂'},
                            {x:119.289579,y:26.360314,'title':'日溪'},
                ]
                for (let i = 0; i < points.length; i++) {
                    var point = points[i];
                    var textSymbol = new TextSymbol({
                        text:point.title,
                        color:'black',
                        offsetY:15,
                        font: {size:12}
                    });
                    var pointGraphic = new Graphic({
                        geometry: {
                            type: 'point',
                            longitude:point.x,
                            latitude:point.y
                        },
                        symbol:{
                            type: 'simple-marker',
                            size: 10.25,
                            width: 2.6875,
                            path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z",
                            color: 'purple',
                        },
                        attributes:{
                            title:point.title
                        }
                    });

                    // pointGraphic.set('title',textSymbol);
                    graphicsLayer.add(pointGraphic);
                }
                    map.add(graphicsLayer,1);*/
            },
            clickpopup(sitename){
                this.popuptab = true;
                this.$http.get('/hardware/getHarewaredDatabysitename.do?sitename='+sitename, {emulateJSON: true}).then(function (res) {
                // Vue.http.get('/hardware/getHarewaredDatabysitename.do?sitename='+sitename).then(function (res) {
                    var duibidatas= dataformate(res.data);

                    // loadChart(datas, beginDate, endDate, duibidatas, yanchengdatas, danweiy, optiondata)

                    var texts = "";
                    /*var optionValue = this.siteTypeOptionValue.proNamech;
                    if (beginDate != null) {
                        texts = beginDate + ' - ' + endDate + '      ' + optionValue;
                    }*/
                    var seriesdata = [];
                    for (let key in duibidatas) {
                        if (duibidatas.hasOwnProperty(key)) {
                            seriesdata.push({
                                name: key,
                                type: 'line',
                                data: duibidatas[key],
                                // color: linecolor[key]
                            })
                        }
                    }
                    this.myChart = echarts.init(document.getElementById('eChartsDiv'));
                    this.myChart.clear();
                    option = {
                        title: {
                            text: texts,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',

                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        xAxis: {
                            name: '时间',
                            type: 'time',
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            },
                            splitNumber: 20
                        },
                        yAxis: {
                            type: 'value',
                        },
                        series: seriesdata
                    };

                    var biaozunJson = "";
                    this.myChart.setOption(option);

                    function dataformate(data){
                        var result = {};var arr = [];
                        for (let i = 0; i < data.length; i++) {
                            var v = data[i].dataValue;
                            var now = new Date(data[i].dataTime);
                            var value = "";
                            if(isNumber(v)) {
                                value = v;
                            }
                            var jjson = [now, value];
                            // arr.push(jjson);
                            //{库心：[1.4，1.5]}
                            var keysite = data[i].dataNameCh;
                            if (keysite in result){
                                result[keysite].push(jjson);
                            }else {
                                result[keysite] = [jjson]
                            }
                        }
                        return result;
                        function isNumber(value) {
                            return /^-?\d+(\.\d+)?$/.test(value);
                        }
                    }
                })
            },
            choosetuceng(index,value){
                if (index == 0) {
                    if (value) {
                        rcxc.visible = true;
                    } else {
                        rcxc.visible = false;
                        // map.remove(rcxc)
                    }
                }else {
                    if (value ) {
                        lsdw.visible = true;
                        // map.add(lsdw);
                    } else {
                        lsdw.visible = false;
                        // map.remove(lsdw);
                    }
                }
            },
            httpLoadShp() {
                //加载对应的shp数据
                //实测数据
                // console.log(this.proDataNow);
                // console.log(this.timeSilderValue);
                // this.$http.get('/dm3/findShpData.do?type=' + this.dataType + "&timestamp=" + this.timeSilderValue + "&proName=" + this.proDataNow + "&mapName=" + this.fileSelectValue, {emulateJSON: true}).then(function (res) {
                //     console.log(res.data.features[0].properties.color);
                // });
                this.maxShow = false;
                //项目改注释
                // this.loadShp();
                //项目改开始
                this.loadsite()
                //项目改结束
            },
            loadShp() {
                map.removeAll();
                var judge = false;
                if (this.dataType == 0) {
                    judge = this.proDataNow != "";
                } else {
                    judge = this.proDataNow != "" && this.fileSelectValue != "";
                }

                if (judge) {
                    if (this.layerNumber == "渲染图" || this.layerNumber == "Rendered image") {
                        //这里是渲染图
                        this.$http.get("/dm3/findShpData.do?type=2&timestamp=" + this.timeSilderValue + "&proName=" + this.proDataNow + "&mapName=" + this.fileSelectValue + "&tir=" + this.layerNumber + "&ColorType=" + this.urlHrefType, {emulateJSON: true}).then(function (res) {
                            if (typeof (res.data.picName) == "undefined") {
                                console.log("没找到渲染图");
                            } else {
                                console.log(res);
                                var host = "http://" + window.location.host + "/home/readPartImage.do?address=" + res.data.picName + "&FilePath=" + encodeURIComponent(res.data.path);
                                this.imageMapNeed = host;
                                // console.log(host);
                                var ImageOverlayLayer = new CustomImageOverlayLayer({
                                    // picUrl: "白色2.png",
                                    extent: {
                                        xmin: 113.838752,
                                        ymin: 22.3859090,
                                        xmax: 114.0849148,
                                        ymax: 22.540103
                                    }
                                });
                                map.add(ImageOverlayLayer);
                                //地图移动刷新,防止地图初始化时候，图片叠加图层加载刷新不过来
                                setTimeout(function () {
                                    var center = view.center.clone();
                                    center.x -= 0.001; //底图是经纬度
                                    view.center = center;
                                    view.goTo(view.center, {
                                        speedFactor: 0.1,
                                        easing: "linear" //linear, in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo
                                    });
                                }, 500);

                            }
                        });
                    } else {
                        //这里是普通map
                        const geojsonLayer = new GeoJSONLayer({
                            url: '/dm3/findShpData.do?type=' + this.dataType + "&timestamp=" + this.timeSilderValue + "&proName=" + this.proDataNow + "&mapName=" + this.fileSelectValue + "&tir=" + this.layerNumber + "&ColorType=" + this.urlHrefType,
                            // copyright: "USGS Earthquakes",
                            popupTemplate: this.returnTemplate(),
                            renderer: this.returnRenderer(),
                        });
                        geojsonLayer.load().then(function () {
                            successMessage();
                        }, function (error) {
                            errorMessage();
                        });
                        map.add(geojsonLayer);
                        //获取最大值和最小值
                        this.$http.get("/dm3/findShpData.do?type=3&timestamp=" + this.timeSilderValue + "&proName=" + this.proDataNow + "&mapName=" + this.fileSelectValue + "&tir=" + this.layerNumber + "&ColorType=" + this.urlHrefType, {emulateJSON: true}).then(function (res) {
                            if (res.data != null) {
                                this.maxShow = true;
                                this.max = res.data.max;
                                this.min = res.data.min;
                            }
                        });

                        if(this.urlHrefType==1){
                            this.$http.get("/dm3/findShpData.do?type=4&timestamp=" + this.timeSilderValue + "&proName=" + this.proDataNow + "&mapName=" + this.fileSelectValue + "&tir=" + this.layerNumber + "&ColorType=" + this.urlHrefType, {emulateJSON: true}).then(function (res) {
                                this.tulieData = res.data.tuli;
                                if (this.tulieData.length == 0) {
                                    this.tulisShow = false;
                                } else {
                                    this.tulisShow = true;
                                }
                            });
                        }else{
                            this.$http.get('/dm3/getLegendPro.do?proName=' + this.proDataNow, {emulateJSON: true}).then(function (res) {
                                this.tulieData = res.data;
                                if (this.tulieData.length == 0) {
                                    this.tulisShow = false;
                                } else {
                                    this.tulisShow = true;
                                }
                            });
                        }
                    }

                } else {
                    console.log("参数不全");
                    // console.log(this.proDataNow ,this.fileSelectValue );
                }


                // geojsonLayer.on("loadError", function(event) {
                //     console.log(event);
                //     // console.error("LayerView failed to create for layer with the id: ", layer.id, " in this view: ", event.view);
                // });

            },
            leftSwitch(menu) {
                this.proDataNow = menu;
                //生成图例
                if (this.urlHrefType == 0) {
                    this.$http.get('/dm3/getLegendPro.do?proName=' + this.proDataNow, {emulateJSON: true}).then(function (res) {
                        this.tulieData = res.data;
                        if (this.tulieData.length == 0) {
                            this.tulisShow = false;
                        } else {
                            this.tulisShow = true;
                        }
                    });
                } else {

                }


            }, changeType(index) {
                this.dataType = index;
                //显示和隐藏属性劣币
                if (index == 0) {
                    //实测数据
                    this.proShow = true;
                    this.proDataNow = this.harWorddData[0].proNameen;
                    this.tucengData = [
                        {
                            value: true,
                            title: this.language.Observation_point,
                        }
                    ];
                } else {
                    this.proShow = false;
                    this.proDataNow = this.proData[0].proNameen;
                    //模拟数据
                    this.tucengData = [
                        {
                            value: true,
                            title: this.language.First_floor,
                        }, {
                            value: false,
                            title: this.language.Second_floor,
                        }, {
                            value: false,
                            title: this.language.Third_layer,
                        }, {
                            value: false,
                            title: this.language.Fourth_floor,
                        }, {
                            value: false,
                            title: this.language.Fifth_floor,
                        }, {
                            value: false,
                            title: this.language.Rendered_image,
                        },
                    ];
                    //恢复刚才选的
                    for (let i = 0; i < this.tucengData.length; i++) {
                        if (this.tucengData[i].title != this.layerNumber) {
                            this.tucengData[i].value = false;
                        } else {
                            this.tucengData[i].value = true;
                        }
                    }
                }

            }, getProType() {
                //获取属性列表
                this.$http.get('/readMap/findHisDataType.do?type=0', {emulateJSON: true}).then(function (res) {
                    // console.log(res);
                    this.proData = res.data;
                    this.$http.get('/readMap/findHisDataType.do?type=1', {emulateJSON: true}).then(function (res) {
                        // console.log(res);
                        this.harWorddData = res.data;
                        this.changeType(0);
                    });
                });
            }, getMapList() {
                //获取Map列表
                this.$http.get('/dm3/findMapList.do', {emulateJSON: true}).then(function (res) {
                    this.fileSelectOption = res.data;
                });
            }, initializeTimeSlider() {
                view.ui.empty("bottom-leading");
                var timeSlider = new TimeSlider({
                    // container: "timeSliderDiv",
                    view: view,
                    mode: "instant",
                    playRate:500,
                    fullTimeExtent: {
                        start: new Date(this.timeSliderBeginTime),
                        end: new Date(this.timeSilderEndTime)
                    },
                    values: [
                        new Date(this.timeSilderEndTime)
                    ],
                    stops: {
                        interval: {
                            value: 1,
                            unit: "hours"
                        }
                    }
                });
                //监听时间轴
                timeSlider.watch("values", function (values) {
                    //给对应值赋值
                    em.$data.timeSilderValue = new Date(values).getTime();
                });
                view.ui.add(timeSlider, "bottom-leading");
            }, initializeTimeSliderTime() {
                //初始化时间
                this.timeSilderEndTime = Date.parse(new Date());
                this.timeSliderBeginTime = this.timeSilderEndTime - (86400000 * 3);
            }, returnTemplate() {
                var tireName = "";
                if (this.proShow) {
                    tireName = this.language.Corrected_value;
                } else {
                    tireName = this.language.Number_layers;
                }
                const template = {
                    // title: "观测点数据",
                    content: [{
                        type: "fields", // Autocasts as new FieldsContent()
                        fieldInfos: [		//这个就对应的点击后显示表格，和后台的属性名对应上
                            {
                                fieldName: "proName",
                                label: this.language.Attribute_name,
                            }, {
                                fieldName: "tier",
                                label: tireName,
                            }, {
                                fieldName: "value",
                                label: this.language.value,
                            }, {
                                fieldName: "color",
                                label: this.language.colour,
                            },{
                                fieldName: "xy",
                                label: "XY",
                            },
                        ]
                    }]
                };
                return template;
            }, returnRenderer() {
                // var hardShowRender = {	//样式选择
                //     type: "simple",
                //     field: "mag",
                //     symbol: {
                //         type: "simple-marker",
                //         outline: { style: "none", cap: "square", width: 0 },
                //         angle: 0,
                //         size: 18,
                //         color: [245, 13, 13, 1]
                //     }
                // };
                var hardShowRender = {};
                if (this.urlHrefType == 0) {
                    hardShowRender = {
                        type: "unique-value", // autocasts as new UniqueValueRenderer()
                        field: "color",
                        defaultSymbol: {
                            type: "simple-marker",
                            outline: {style: "none", cap: "square", width: 0},
                            size: 18,
                        },
                        uniqueValueInfos: [{
                            value: "无",
                            symbol: {
                                type: "simple-marker", // autocasts as new SimpleFillSymbol()
                                outline: {style: "none", cap: "square", width: 0},
                                color: [0, 0, 0, 0]
                            },
                        }, {
                            value: "red",
                            symbol: {
                                type: "simple-marker",
                                outline: {style: "none", cap: "square", width: 0},
                                color: [253, 19, 19, 1]
                            },
                        }, {
                            value: "yellow",
                            symbol: {
                                type: "simple-marker",
                                outline: {style: "none", cap: "square", width: 0},
                                color: [255, 243, 0, 1]
                            },
                        }, {
                            value: "green",
                            symbol: {
                                type: "simple-marker",
                                outline: {style: "none", cap: "square", width: 0},
                                color: [115, 255, 142, 1]
                            },
                        },]
                    };

                } else {
                    hardShowRender = {
                        type: "unique-value", // autocasts as new UniqueValueRenderer()
                        field: "color",
                        defaultSymbol: {
                            type: "simple-marker",
                            outline: {style: "none", cap: "square", width: 0},
                            size: 18,
                        },
                        uniqueValueInfos: [{
                            value: "无",
                            symbol: {
                                type: "simple-marker", // autocasts as new SimpleFillSymbol()
                                outline: {style: "none", cap: "square", width: 0},
                                color: [0, 0, 0, 0]
                            },
                        }, {
                            value: "红",
                            symbol: {
                                type: "simple-marker",
                                outline: {style: "none", cap: "square", width: 0},
                                color: "#b81618"
                            },
                        }, {
                            value: "橙",
                            symbol: {
                                type: "simple-marker",
                                outline: {style: "none", cap: "square", width: 0},
                                color: "#ff6101"
                            },
                        }, {
                            value: "黄",
                            symbol: {
                                type: "simple-marker",
                                outline: {style: "none", cap: "square", width: 0},
                                color: "#ffe200"
                            },
                        }, {
                            value: "绿",
                            symbol: {
                                type: "simple-marker",
                                outline: {style: "none", cap: "square", width: 0},
                                color: "#19ffe5"
                            },
                        }, {
                            value: "蓝",
                            symbol: {
                                type: "simple-marker",
                                outline: {style: "none", cap: "square", width: 0},
                                color: "#010080"
                            },
                        },]
                    };

                }

                return hardShowRender;
            }
        }
    });

    function errorMessage() {
        em.$message({
            message: '未查询到数据',
            type: 'error'
        });
    };

    function successMessage() {
        em.$message({
            message: '数据加载成功',
            type: 'success'
        });
    };
});